<template>
	<view class="container">
		<!-- 滚动视图包裹整个页面 -->
		<scroll-view class="scroll-content" scroll-y="true">

			<!-- 顶部轮播图 -->
			<view class="section">
				<text class="section-title">泉州风光</text>
				<swiper class="swiper" :autoplay="true" :interval="3000" :duration="500" indicator-dots="true">
					<swiper-item v-for="(item, index) in swiperList" :key="index">
						<image class="swiper-image" :src="item.image" mode="aspectFill"></image>
					</swiper-item>
				</swiper>
			</view>

			<!-- 城市介绍 -->
			<view class="section">
				<text class="section-title">泉州介绍</text>
				<rich-text class="rich-text" :nodes="cityIntroduction"></rich-text>
			</view>

			<!-- 探索进度 -->
			<view class="section">
				<text class="section-title">探索进度</text>
				<view class="progress-container">
					<text class="progress-text">当前进度: {{progress}}%</text>
					<progress class="progress-bar" :percent="progress" show-info border-radius="10"
						active-color="#007AFF" backgroundColor="#F0F0F0"></progress>
				</view>
			</view>

			<!-- 城市选择 -->
			<view class="section">
				<text class="section-title">选择城市</text>
				<picker class="picker" mode="region" @change="onCityChange" :value="selectedCity">
					<view class="picker-text">
						当前选择: {{selectedCity[0]}} - {{selectedCity[1]}} - {{selectedCity[2]}}
					</view>
				</picker>
			</view>

			<!-- 媒体展示 -->
			<view class="section">
				<text class="section-title">泉州宣传</text>

				<!-- 视频播放 -->
				<video class="video" :src="videoSrc" controls autoplay="false" poster="/static/city/video-poster.jpg"
					show-play-btn="true" show-center-play-btn="true"></video>

				<!-- 音频播放 - 修复版本 -->
				<view class="audio-container">
					<text class="audio-title">泉州背景音乐</text>
					<view class="audio-controls">
						<button class="audio-btn" @tap="toggleAudio">
							{{isPlaying ? '暂停' : '播放'}}
						</button>
						<text class="audio-info">{{audioName}} - {{audioAuthor}}</text>
						<slider class="audio-progress" :value="audioProgress" min="0" max="100"
							@changing="onAudioProgressChange" activeColor="#007AFF"></slider>
					</view>
				</view>
			</view>
			<!-- 偏好设置 -->
			<view class="section">
				<text class="section-title">偏好设置</text>

				<!-- 出行方式选择 -->
				<view class="preference-item">
					<text class="preference-label">出行方式:</text>
					<radio-group class="radio-group" @change="onTransportChange">
						<label class="radio-label" v-for="item in transportOptions" :key="item.value">
							<radio :value="item.value" :checked="transport === item.value" color="#007AFF" />
							<text class="radio-text">{{item.name}}</text>
						</label>
					</radio-group>
				</view>

				<!-- 显示推荐景点开关 -->
				<view class="preference-item">
					<text class="preference-label">显示推荐景点:</text>
					<switch class="switch" :checked="showAttractions" @change="onShowAttractionsChange" color="#007AFF">
					</switch>
				</view>

				<!-- 探索半径设置 -->
				<view class="preference-item">
					<text class="preference-label">探索半径: {{exploreRadius}}km</text>
					<slider class="slider" :value="exploreRadius" min="1" max="50" @change="onRadiusChange"
						activeColor="#007AFF" backgroundColor="#F0F0F0" block-color="#007AFF"></slider>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 轮播图数据
				swiperList: [{
						image: '/static/city/city1.png'
					},
					{
						image: '/static/city/city2.jpg'
					},
					{
						image: '/static/city/city3.jpg'
					},
					{
						image: '/static/city/city4.jpg'
					},
					{
						image: '/static/city/city5.jpg'
					}
				],

				// 富文本内容
				cityIntroduction: `
        <div style="line-height: 1.6;">
          <h3 style="color: #333; margin-bottom: 10px;">海上丝绸之路起点 - 泉州</h3>
          <p style="color: #666; margin-bottom: 8px;">
            <strong>历史文化：</strong>泉州是国务院首批公布的24个历史文化名城之一，是古代"海上丝绸之路"起点，宋元时期被誉为"东方第一大港"。
          </p>
          <p style="color: #666; margin-bottom: 8px;">
            <strong>著名景点：</strong>清源山、开元寺、泉州清净寺、崇武古城、洛阳桥等。
          </p>
          <p style="color: #666;">
            <strong>特色文化：</strong>拥有<span style="color: #007AFF;">南音</span>、
            <span style="color: #007AFF;">木偶戏</span>和<span style="color: #007AFF;">闽南建筑</span>等丰富的非物质文化遗产。
          </p>
        </div>
      `,

				// 进度条数据
				progress: 60,

				// 城市选择数据
				selectedCity: ['福建省', '泉州市', '丰泽区'],

				// 偏好设置数据
				transport: 'bus',
				transportOptions: [{
						value: 'bus',
						name: '公交'
					},
					{
						value: 'car',
						name: '自驾'
					},
					{
						value: 'walk',
						name: '步行'
					}
				],
				showAttractions: true,
				exploreRadius: 10,

				// 媒体数据
				videoSrc: '/static/city/city-video.mp4',
				audioName: '泉州南音',
				audioAuthor: '泉州传统乐团',

				// 音频控制
				isPlaying: false,
				audioProgress: 0,
				audioContext: null,

				// 地图数据 - 泉州坐标
				mapLatitude: 24.874272, // 泉州市中心纬度
				mapLongitude: 118.675676, // 泉州市中心经度
				scale: 14, // 地图缩放级别
				markers: [{
						id: 1,
						latitude: 24.874272,
						longitude: 118.675676,
						title: '泉州市中心',
						iconPath: '/static/city/marker.png',
						width: 30,
						height: 30,
						callout: {
							content: '泉州市中心',
							color: '#007AFF',
							fontSize: 14,
							borderRadius: 4,
							bgColor: '#FFFFFF',
							padding: 10,
							display: 'ALWAYS'
						}
					},
					{
						id: 2,
						latitude: 24.957578,
						longitude: 118.586548,
						title: '清源山',
						iconPath: '/static/city/marker.png',
						width: 30,
						height: 30,
						callout: {
							content: '清源山风景区',
							color: '#007AFF',
							fontSize: 14,
							borderRadius: 4,
							bgColor: '#FFFFFF',
							padding: 10,
							display: 'BYCLICK'
						}
					},
					{
						id: 3,
						latitude: 24.910745,
						longitude: 118.591529,
						title: '开元寺',
						iconPath: '/static/city/marker.png',
						width: 30,
						height: 30,
						callout: {
							content: '开元寺',
							color: '#007AFF',
							fontSize: 14,
							borderRadius: 4,
							bgColor: '#FFFFFF',
							padding: 10,
							display: 'BYCLICK'
						}
					}
				]
			}
		},

		onLoad() {
			// 初始化音频上下文
			this.audioContext = uni.createInnerAudioContext()
			this.audioContext.src = '/static/city/city-music.mp3'

			// 监听音频事件
			this.audioContext.onPlay(() => {
				this.isPlaying = true
			})

			this.audioContext.onPause(() => {
				this.isPlaying = false
			})

			this.audioContext.onEnded(() => {
				this.isPlaying = false
				this.audioProgress = 0
			})

			this.audioContext.onTimeUpdate(() => {
				if (this.audioContext.duration > 0) {
					this.audioProgress = (this.audioContext.currentTime / this.audioContext.duration) * 100
				}
			})
		},

		onUnload() {
			// 页面卸载时销毁音频
			if (this.audioContext) {
				this.audioContext.destroy()
			}
		},

		methods: {

			// 城市选择变化
			onCityChange(e) {
				this.selectedCity = e.detail.value
				console.log('选择城市:', this.selectedCity)
				// 这里可以添加根据城市切换地图位置和数据的逻辑
			},

			// 出行方式变化
			onTransportChange(e) {
				this.transport = e.detail.value
				console.log('出行方式:', this.transport)
			},

			// 显示景点开关变化
			onShowAttractionsChange(e) {
				this.showAttractions = e.detail.value
				console.log('显示景点:', this.showAttractions)
			},

			// 探索半径变化
			onRadiusChange(e) {
				this.exploreRadius = e.detail.value
				console.log('探索半径:', this.exploreRadius)
			},

			// 切换音频播放状态
			toggleAudio() {
				if (this.isPlaying) {
					this.audioContext.pause()
				} else {
					this.audioContext.play()
				}
			},

			// 音频进度改变
			onAudioProgressChange(e) {
				const progress = e.detail.value
				if (this.audioContext.duration > 0) {
					const newTime = (progress / 100) * this.audioContext.duration
					this.audioContext.seek(newTime)
				}
			}
		}
	}
</script>

<style scoped>
	.container {
		height: 100vh;
		background-color: #f5f5f5;
	}

	.scroll-content {
		height: 100%;
		padding: 20rpx;
		background-color: #f5f5f5;
	}

	.section {
		background-color: white;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
		box-sizing: border-box;	/* 确保内边距包含在宽度内 */
		width: 95%;				/* 缩进来，不然右侧会被裁掉 */ 
	}

	.section-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
		display: block;
	}

	/* 轮播图样式 */
	.swiper {
		height: 400rpx;
		border-radius: 12rpx;
		overflow: hidden;
	}

	.swiper-image {
		width: 100%;
		height: 100%;
	}

	/* 富文本样式 */
	.rich-text {
		font-size: 28rpx;
		line-height: 1.6;
	}

	/* 进度条样式 */
	.progress-container {
		margin-top: 20rpx;
	}

	.progress-text {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 20rpx;
		display: block;
	}

	.progress-bar {
		width: 100%;
	}

	/* 选择器样式 */
	.picker {
		background-color: #f8f8f8;
		padding: 20rpx;
		border-radius: 8rpx;
		margin-top: 20rpx;
	}

	.picker-text {
		font-size: 28rpx;
		color: #333;
	}

	/* 偏好设置样式 */
	.preference-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 30rpx;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.preference-label {
		font-size: 28rpx;
		color: #333;
		flex: 1;
	}

	.radio-group {
		display: flex;
		gap: 40rpx;
	}

	.radio-label {
		display: flex;
		align-items: center;
		gap: 10rpx;
	}

	.radio-text {
		font-size: 26rpx;
		color: #666;
	}

	.switch {
		transform: scale(0.8);
	}

	.slider {
		flex: 1;
		margin-left: 20rpx;
	}

	/* 媒体样式 */
	.video {
		width: 100%;
		height: 400rpx;
		border-radius: 12rpx;
		margin-bottom: 30rpx;
	}

	.audio-container {
		background-color: #f8f8f8;
		padding: 30rpx;
		border-radius: 12rpx;
	}

	.audio-title {
		font-size: 32rpx;
		color: #333;
		margin-bottom: 20rpx;
		display: block;
		font-weight: bold;
	}

	.audio-controls {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.audio-btn {
		background-color: #007AFF;
		color: white;
		border: none;
		border-radius: 8rpx;
		padding: 20rpx 40rpx;
		font-size: 28rpx;
	}

	.audio-info {
		font-size: 26rpx;
		color: #666;
		text-align: center;
	}

	.audio-progress {
		width: 100%;
	}

	/* 地图样式 */
	.map-container {
		position: relative;
	}

	.map {
		width: 100%;
		height: 500rpx;
		border-radius: 12rpx;
		margin-top: 20rpx;
	}

	.map-controls {
		position: absolute;
		top: 40rpx;
		right: 20rpx;
		display: flex;
		flex-direction: column;
		gap: 10rpx;
	}

	.map-btn {
		background-color: rgba(255, 255, 255, 0.9);
		color: #333;
		border: 1rpx solid #ddd;
		border-radius: 6rpx;
		padding: 10rpx 20rpx;
		font-size: 24rpx;
	}

	.map-placeholder {
		width: 100%;
		height: 500rpx;
		background-color: #f0f0f0;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 12rpx;
		margin-top: 20rpx;
	}
</style>